<template>
	<view class="containsumbox">
		<view class="adresstit">
			<view @click="totianxieDizhi(0,{})" class="wancheng">添加收货地址</view>
		</view>
		<scroll-view class="adressboxs" scroll-y>
			<view v-for="item,index in adressList" :key='index' class="adressitem">
				<view class="cebtebtbox">
					<view class="adresstext">{{item.addrAoi}}{{item.addrHouse}}</view>
					<view class="adresslianxi">{{item.name}} {{item.mobile}}</view>
				</view>
				<image @click.stop="totianxieDizhi(1,item)" class="rightimage" src="../../static/dingdan_bianji.png">
				</image>
			</view>
		</scroll-view>
		<!-- <view @click="adressonClose" class="addadressbtn">完成</view> -->
		<view class="adressxian"></view>
	</view>
</template>

<script>
	import {
		clearCart, //清空购物车
		getShopInfo, // 店铺详情
		memberCartList, // 我的购物车
		getMemberAddresses, // 获取用户的  地址列表
		computeConformPromo, // 获取所有的可以用的    优惠活动
		getDeliveryAmount, // 获取配送费 获取默认常用地址
		OrderForOne, //商品下订单
		calculatePrice //计算价格
	} from "../../request/api.js"
	const hours = []
	const minnits = []
	for (let i = 0; i <= 23; i++) {
		hours.push(i)
	}
	for (let j = 0; j <= 59; j++) {
		minnits.push(j)
	}
	export default {
		data() {
			return {
				uid: '',
				shopid: '',
				hours: hours,
				minnits: minnits,
				day: 0,
				hour: 0,
				minnit: 0,
				timeStr: '',
				value: [0, 0, 0],
				daylist: ['今天', '明天'],
				timeshow: false, //时间弹唱
				shopinfo: {},
				peisongindex: 1, //1配送 2自取
				adressinfo: {},
				adressList: [],
				adressShow: false, //选择地址弹窗
				distance: 0,
				peisongfinfo: {
					distanceAmount: 0
				},
				beuzhu: '',
				sumprice: {
					sumPrice: 0,
					peisongprice: 0,
					groupAmount: 0
				},
				ziquphoneval: '',
				ziqunameval: '',

				youhuilists: [], //满足的所有优惠活动
				youhuiprices: 0,
				url: '',
				panmdua: '',
				buying: false,
				groupbuyingproducts: [],
				money: ''

			}
		},
		onLoad(options) {

		},
		onShow() {
			let that = this
			that.uid = uni.getStorageSync('userInfo').id
			this.url = getApp().globalData.url + '/'
			this.getaddressSel() // 获取所有的地址
		},
		methods: {
			// 添加备注页面
			tobeizhuye() {
				uni.navigateTo({
					url: '/pages/tianxieremarks/index?beizhu=' + this.beuzhu
				})
			},

			// 修改 地址
			totianxieDizhi(num, obj) {
				console.log(num, obj)
				this.adressinfo = {}
				if (num == 1) {
					uni.navigateTo({
						url: '../tianxieadress/index?type=1&flag=set&adressinfo=' + JSON.stringify(obj)
					})
				} else {

					uni.navigateTo({
						url: '../tianxieadress/index?type=1&flag=add&adressinfo={}'
					})
				}

			},
			// // 获取配送费 获取默认常用地址
			getDeliveryPrice() {
				uni.showLoading({
					title: '加载中',
				})
				const that = this;
				getDeliveryAmount({
					memberId: that.uid,
					shopId: that.shopid,
					gpsFromLat: that.adressinfo.lat,
					gpsFromLng: that.adressinfo.lng,
					gpsToLat: that.shopinfo.lat,
					gpsToLng: that.shopinfo.lng,
					amount: that.gouwucheinfo.totalMoney
				}).then(responts => {
					setTimeout(function() {
						uni.hideLoading()
					})
					setTimeout(function() {
						console.log(responts)
						if (responts.success) {
							that.distance = responts.result.distance
							that.peisongfinfo = responts.result
							that.jisuanprice()
						} else {
							uni.showToast({
								title: '获取配送费：' + responts.message,
								icon: 'none'
							})
						}
					})
				}).catch(error => {
					setTimeout(function() {
						console.log(error)
						uni.hideLoading()
					})
				})
			},
			// 选择地址
			chooseadressfunc(item) {
				let that = this
				console.log(item, "选中的地址");
				this.adressinfo = item
				that.sumprice = {
					sumPrice: 0,
					peisongprice: 0
				}
				that.jisuanprice();
			},
			// 获取所有的地址
			getaddressSel() {
				uni.showLoading({
					title: '加载中',
				})
				const that = this;
				getMemberAddresses({
					memberId: that.uid
				}).then(responts => {
					setTimeout(function() {
						uni.hideLoading()
					})
					setTimeout(function() {
						console.log(responts)
						if (responts.success) {
							that.adressList = responts.result
						} else {
							uni.showToast({
								title: '获取地址列表：' + responts.message,
								icon: 'none'
							})
						}
					})
				}).catch(error => {
					setTimeout(function() {
						console.log(error)
						uni.hideLoading()
					})
				})
			},
			// 显示 地址选择
			adressshowfun() {
				this.adressShow = true
			},
			// 关闭  地址
			adressonClose() {
				this.adressShow = false
			},



		}
	}
</script>

<style lang="scss" scoped>
	.containsumbox {
		width: 100%;
		min-height: 100vh;
		padding: 14rpx;
		box-sizing: border-box;
		background: #f7f7f7;


		/* 地址选择的标题 */
		.adresstit {
			width: 100%;
			height: 82rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			border-bottom: 2rpx solid #eee;
			font-size: 26rpx;
			color: #999999;

			.quxiao {
				position: absolute;
				top: 0;
				left: 0;
				color: #333333;
				height: 82rpx;
				line-height: 82rpx;
				padding: 0 28rpx;
			}

			.wancheng {
				position: absolute;
				top: 0;
				right: 0;
				color: #ef5050;
				height: 82rpx;
				line-height: 82rpx;
				padding: 0 28rpx;
			}
		}

		/* 地址列表 */
		.adressboxs {
			margin: 14rpx;
			// width: 100%;
			border-bottom: 2rpx solid #eee;
			box-sizing: border-box;
			border-radius: 44rpx;
			background: #ffffff;

			.adressitem {
				height: 128rpx;
				box-sizing: border-box;
				padding: 0 45rpx;

				border-bottom: 2rpx solid #eee;
				display: flex;
				align-items: center;
				position: relative;

				.leftimage {
					position: absolute;
					left: 28rpx;
					width: 40rpx;
					height: 40rpx;
				}

				.cebtebtbox {
					width: 100%;

					.adresstext {
						width: 100%;
						font-size: 32rpx;
						color: #333333;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 1;
						-webkit-box-orient: vertical;
					}

					.adresslianxi {
						width: 100%;
						font-size: 28rpx;
						color: #999999;
						margin-top: 10rpx;
					}

				}

				.rightimage {
					position: absolute;
					right: 28rpx;
					width: 40rpx;
					height: 40rpx;
					padding: 10rpx 0;
					padding-left: 10rpx;
				}
			}
		}

		.addadressbtn {
			width: 694rpx;
			height: 84rpx;
			text-align: center;
			line-height: 84rpx;
			font-size: 32rpx;
			color: #fff;
			margin: 0 auto;
			background-color: #333333;
			margin-top: 14rpx;
			border-radius: 8rpx;
		}

		.adressxian {
			width: 100%;
			height: 14rpx;
		}





		.headertopboxs {
			width: 100%;
			height: 112rpx;
			position: fixed;
			left: 0;
			z-index: 99;

			.choosepeisongziqubox {
				width: 100%;
				height: 112rpx;
				box-sizing: border-box;
				padding: 28rpx 32rpx 2rpx 32rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				background-color: #EEEEEE;

				.xuanzepeisongfou {
					width: 332rpx;
					height: 100%;
					background-color: #F7F7F7;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 28rpx;
					color: #999999;
					border-radius: 12rpx 12rpx 0 0;

					&.active {
						font-size: 34rpx;
						background-color: #FFFFFF;
						color: #ef5050;
					}
				}
			}
		}

		.container {
			width: 100%;
			height: 100%;
			overflow-y: auto;
			box-sizing: border-box;
			padding-bottom: 166rpx;
			-webkit-overflow-scrolling: touch;

			/* 配送收货地址 */
			.adresstopbox {
				width: 100%;
				border-radius: 44rpx;
				background-color: #fff;
				box-sizing: border-box;
				margin-bottom: 28rpx;
				padding: 0 28rpx;

				.adressbox {
					width: 100%;
					height: 138rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 2rpx solid #EEEEEE;

					&>image {
						width: 40rpx;
						height: 40rpx;

					}

					.leftbox {
						display: flex;
						align-items: center;

						&>image {
							width: 40rpx;
							height: 40rpx;
							margin-right: 18rpx;
						}

						.shouhuodizhibox {
							display: flex;
							flex-direction: column;
							justify-content: space-around;
							flex: 1;

							.wudizhi {
								font-size: 32rpx;
								color: #ef5050;
							}

							.dizhotext {
								flex: 1;
								font-size: 32rpx;
								color: #333333;
								overflow: hidden;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-line-clamp: 1;
								-webkit-box-orient: vertical;
							}

							.phone {
								font-size: 28rpx;
								color: #999;
							}

						}
					}
				}
			}

			/* 自提信息 */
			.zipeisongadress {
				width: 100%;
				background-color: #fff;
				box-sizing: border-box;
				padding: 0 28rpx;

				.adressbox {
					width: 100%;
					height: 138rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 2rpx solid #EEEEEE;

					&.fujiaphonebox {
						height: 102rpx;
					}

					&>image {
						width: 40rpx;
						height: 40rpx;

					}

					.leftbox {
						display: flex;
						align-items: center;

						&>image {
							width: 40rpx;
							height: 40rpx;
							margin-right: 18rpx;
						}

						.shouhuodizhibox {
							display: flex;
							flex-direction: column;
							justify-content: space-around;

							.wudizhi {
								font-size: 32rpx;
								color: #ef5050;
							}

							.dizhotext {
								flex: 1;
								font-size: 32rpx;
								color: #333333;
								overflow: hidden;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-line-clamp: 1;
								-webkit-box-orient: vertical;
							}

							.phone {
								font-size: 28rpx;
								color: #999;
							}
						}
					}
				}

			}

			/* 间隔线 */
			.xian10 {
				background-color: #eee;
				height: 10rpx;
				width: 100%;
			}

			/* 店铺 */
			.shopduoxiangzi {
				box-sizing: border-box;

				.shopname {
					width: 100%;
					height: 84rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.name {
						font-size: 32rpx;
						color: #333333;
					}

					.paotui {
						font-size: 28rpx;
						color: #999;
					}

				}

				.sumgoodsbox {
					width: 100%;
					margin-bottom: 23rpx;
					padding: 0 28rpx;
					background-color: #fff;
					box-sizing: border-box;
					border-radius: 44rpx;

					.goodsitem {
						width: 100%;
						height: 140rpx;
						box-sizing: border-box;
						padding: 0 14rpx;
						display: flex;
						align-items: center;
						background-color: #fff;
						margin-bottom: 12rpx;

						.goodsimg {
							width: 112rpx;
							height: 112rpx;
							margin-right: 16rpx;
						}

						.infobox {
							height: 112rpx;
							width: 536rpx;

							.nameandprice {
								display: flex;
								align-items: center;
								justify-content: space-between;
								font-size: 28rpx;
								color: #333333;

								.goodsname {
									flex: 1;
									overflow: hidden;
									text-overflow: ellipsis;
									display: -webkit-box;
									-webkit-line-clamp: 1;
									-webkit-box-orient: vertical;
								}

								.goodsprice {
									margin-left: 16rpx;
								}
							}

							.goodsnumn {
								display: flex;
								align-items: center;
								justify-content: space-between;
								font-size: 28rpx;
								color: #999999;
								margin-top: 4rpx;
							}
						}
					}
				}

				/* 配送费  包装费 */
				.baozhuangfei {
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 28rpx;
					color: #333333;
					padding-bottom: 20rpx;

					.pic2box {
						display: flex;
						align-items: center;
						color: #333;

						.pic2 {
							color: #ef5050;
							margin-left: 50rpx;
						}
					}
				}

				/* 各类优惠 */
				.youhuisumbox {
					border-top: 2rpx solid #eee;

					.youhuiitem {
						height: 70rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.lefts {
							display: flex;
							align-items: center;

							&>image {
								width: 40rpx;
								height: 40rpx;
								margin-right: 18rpx;
							}

							.texts {
								font-size: 28rpx;
								color: #666666;
							}
						}

						.rightpic {
							flex: 1;
							font-size: 28rpx;
							color: #ef5050;
							display: flex;
							align-items: center;
							justify-content: flex-end;

							.rightYHimg {
								width: 40rpx;
								height: 40rpx;
							}
						}

					}
				}

				// 小计
				.youhuixiaoji {
					border-top: 2rpx solid #eee;
					height: 88rpx;
					display: flex;
					align-items: center;
					justify-content: flex-end;

					.yhtext {
						font-size: 28rpx;
						color: #999999;
						margin-right: 18rpx;
					}

					.xiaojit {
						font-size: 32rpx;
						color: #333333;
					}

					.pritexts {
						font-size: 32rpx;
						color: #ef5050;
					}

				}


			}

			/* 备注 */
			.beizhubox {
				width: 100%;
				box-sizing: border-box;
				padding: 30rpx 28rpx;
				display: flex;
				justify-content: space-between;
				background-color: #fff;

				.tit {
					font-size: 32rpx;
					color: #333333;
				}

				.beizhiright {
					font-size: 28rpx;
					color: #999999;
					display: flex;
					align-items: flex-start;

					.textbox {
						width: 480rpx;
					}

					&>image {
						width: 40rpx;
						height: 40rpx;
						margin-left: 18rpx;
					}
				}
			}


		}

		/* 底部合计 */
		.foothejibox {
			width: 100%;
			height: 128rpx;
			box-sizing: border-box;
			padding: 0 28rpx;
			position: fixed;
			left: 0;
			bottom: 0;
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.heji {
				color: #9e9e9e;
				font-size: 28rpx;
				font-weight: 400;

				text {
					color: #f8492e;
					font-size: 36rpx;
					font-weight: 700;
				}
			}

			.dui {
				display: flex;
				flex-wrap: wrap;

				.zhifubtn {
					width: 324.11rpx;
					height: 79.57rpx;
					border-radius: 20rpx;
					background: #d73c38;
					color: #ffffff;
					text-align: center;
					line-height: 80rpx;
					font-size: 32rpx;
					font-weight: 700;

					.fase {
						background-color: #999;
						color: #fff;
					}
				}
			}


		}
	}

	.payment {
		background: #FFFFFF;
		border-radius: 44rpx;
		margin-top: 25.5rpx;
		padding: 30.3rpx 0rpx 10rpx 0rpx;
		box-sizing: border-box;

		.list {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 19rpx;
			padding: 0rpx 52rpx 0rpx 58.5rpx;

			.title {
				color: #333333;
				font-size: 28rpx;
				font-weight: 400;
			}

			.moneyhei {
				color: #333333;

				font-size: 28rpx;
				font-weight: 500;
			}

			.moneyhui {
				color: #33333399;

				font-size: 24rpx;
				font-weight: 400;
			}

			.moneyhong {
				color: #f8492e;

				font-size: 28rpx;
				font-weight: 500;
			}
		}
	}

	.fase {
		width: 324.11rpx;
		height: 79.57rpx;
		border-radius: 20rpx;
		text-align: center;
		line-height: 80rpx;
		font-size: 32rpx;
		font-weight: 700;
		background-color: #999;
		color: #fff;
	}
</style>